<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>01 - 使用xyz加载地图</title>
    <script src='../lib/ol6.4.3/ol.js'></script>
    <!--    <script src='https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.10.0/proj4.js'></script>-->
    <script type='text/javascript' src='https://cdn.bootcss.com/proj4js/2.5.0/proj4.js'></script>
    <link rel='stylesheet' href='../css/ol6.4.3/ol.css'>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #map {
            width: auto;
            height: 100%;
        }
    </style>
</head>
<body>
<div id='map'></div>
<script>
	let url = 'http://27.17.11.147:6080/arcgis/rest/services/JCDT/ZBDT_DY/MapServer/tile/{z}/{y}/{x}?token=t-3_C_YEP044W5WPrNwMSf2KdeOGEUEouoJQK5mp0Bogj2TZW2j_u7kkkyhgLFOL';
	url = 'http://27.17.11.147:6080/arcgis/rest/services/JCDT/DT_SS/MapServer/tile/{z}/{y}/{x}?token=t-3_C_YEP044W5WPrNwMSf2KdeOGEUEouoJQK5mp0Bogj2TZW2j_u7kkkyhgLFOL';
	url = 'http://27.17.11.147:6080/arcgis/rest/services/JCDT/DX/MapServer/tile/{z}/{y}/{x}?token=t-3_C_YEP044W5WPrNwMSf2KdeOGEUEouoJQK5mp0Bogj2TZW2j_u7kkkyhgLFOL';

	const projectionWuHan = new ol.proj.Projection({
		code: 'EPSG:WuHan',
		// extent: [73.62, 16.7, 134.77, 53.56],
		extent: [477481.36280000024, 195266.18920000084, 1062476.2827000003, 555629.4099000003],
		// extent: [800527.8499999996, 348043.81629999913, 831046.8360000001, 386398.6629000008],
		// extent: [780455.0851115175, 344049.37610310514, 878245.2806919087, 403739.49548334384],
		units: 'm',
		axisOrientation: 'neu'
	});

	console.log((477481.36280000024 + 1062476.2827000003) * 0.5, (195266.18920000084 + 555629.4099000003) * 0.5);
	// const center = [(800527.8499999996 + 831046.8360000001) * 0.5, (348043.81629999913 + 386398.6629000008) * 0.5]
	const center = [(780455.0851115175 + 878245.2806919087) * 0.5, (344049.37610310514 + 403739.49548334384) * 0.5]

	const resolutions = [
		264.5838625010584,
		132.2919312505292,
		66.1459656252646,
		26.458386250105836,
		13.229193125052918,
		6.614596562526459,
		2.6458386250105836,
		1.3229193125052918,
		0.5291677250021167,
		// 0.26458386250105836,
		// 0.13229193125052918
	];

	const tileGrid = new ol.tilegrid.TileGrid({
		origin: [-4823200.0, 7002100.0],
		resolutions: resolutions
	});

	const xyzSource = new ol.source.XYZ({
		url,
		tileGrid,
		projection: projectionWuHan
	});
	// 百度地图层
	const xyzLayer = new ol.layer.Tile({
		source: xyzSource
	});

	const map = new ol.Map({
		layers: [
			xyzLayer
		],
		target: 'map',
		view: new ol.View({
			// center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
			center,
			// center: [769978.8227500003, 375447.7995500006],
			zoom: 2,
			projection: projectionWuHan,
			resolutions: resolutions
		})
	});
</script>
</body>
</html>